﻿@model BlogPostModel

@{
    //resources for product tags input
    Html.AppendCssFileParts("~/lib/tagEditor/jquery.tag-editor.css");
    Html.AppendScriptParts("~/lib/tagEditor/jquery.tag-editor.min.js");
    Html.AppendScriptParts("~/lib/tagEditor/jquery.caret.min.js");
}
<script>
    //tags
    $(document).ready(function() {
        @Html.Raw(Model.InitialBlogTags)
        $("#@Html.IdFor(model => model.Tags)").tagEditor({
            autocomplete: {
                delay: 0,
                position: { collision: 'flip' },
                source: initialBlogTags
            },
            delimiter: ',',
            placeholder: '@T("Admin.ContentManagement.Blog.BlogPosts.Fields.Tags.Placeholder")'
        });
    });
</script>

<div class="panel-body">
    <div class="form-group" @(Model.AvailableLanguages.SelectionIsNotPossible() ? Html.Raw("style=\"display:none\"") : null)>
        <div class="col-md-3">
            <nop-label asp-for="LanguageId" />
        </div>
        <div class="col-md-9">
            <nop-select asp-for="LanguageId" asp-items="Model.AvailableLanguages" />
            <span asp-validation-for="LanguageId"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <nop-label asp-for="Title" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="Title" asp-required="true" />
            <span asp-validation-for="Title"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <nop-label asp-for="Body" />
        </div>
        <div class="col-md-9">
            <div class="input-group input-group-required">
                <nop-editor asp-for="Body" asp-template="RichEditor" />
                <div class="input-group-btn">
                    <nop-required />
                </div>
            </div>
            <span asp-validation-for="Body"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <nop-label asp-for="BodyOverview" />
        </div>
        <div class="col-md-9">
            <nop-textarea asp-for="BodyOverview"></nop-textarea>
            <span asp-validation-for="BodyOverview"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <nop-label asp-for="Tags" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="Tags" />
            <span asp-validation-for="Tags"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <nop-label asp-for="AllowComments" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="AllowComments" />
            <span asp-validation-for="AllowComments"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <nop-label asp-for="IncludeInSitemap" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="IncludeInSitemap" />
            <span asp-validation-for="IncludeInSitemap"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <nop-label asp-for="StartDateUtc" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="StartDateUtc" />
            <span asp-validation-for="StartDateUtc"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <nop-label asp-for="EndDateUtc" />
        </div>
        <div class="col-md-9">
            <nop-editor asp-for="EndDateUtc" />
            <span asp-validation-for="EndDateUtc"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3">
            <nop-label asp-for="SelectedStoreIds" />
        </div>
        <div class="col-md-9">
            <nop-select asp-for="SelectedStoreIds" asp-items="Model.AvailableStores" asp-multiple="true" />
            <script>
                    $(document).ready(function() {
                        var storesIdsInput = $('#@Html.IdFor(model => model.SelectedStoreIds)').data("kendoMultiSelect");
                        storesIdsInput.setOptions({
                            autoClose: false,
                            filter: "contains"
                        });

                        @if (Model.AvailableStores.Count == 0)
                        {
                            <text>
                        storesIdsInput.setOptions({
                            enable: false,
                            placeholder: 'No stores available'
                        });
                        storesIdsInput._placeholder();
                        storesIdsInput._enable();
                        </text>
                        }
                    });
            </script>
        </div>
    </div>
</div>
